<template>
	<view class="service-information required-form-Box">
		<view class="all-text">
			<view class="txt-line" style="margin-left: 40rpx" v-if="dateList.id">
				{{ `${dateList.lineName}${dateList.branchLineName ? '(' + dateList.branchLineName + ')' : ''}` || '' }}
			</view>
			<view class="txt-line" style="margin-left: 40rpx" v-else>{{ recordInfo.lineSiteSectionName }}</view>
			<!-- 新增维修 -->
			<add-repair ref="addRepairRefs" v-model="recordInfo.mileage" v-if="!dateList.id"></add-repair>
			<view class="" style="margin: 40rpx" v-if="dateList.id">
				<view class="service-text">
					<view class="text-ring">{{ getContent(dateList) || '' }}</view>
					<view
						class="leval"
						:class="{ re: dateList.rankClass === 'tall', ye: dateList.rankClass === 'central', bl: dateList.rankClass === 'bottom' || dateList.rankClass === 'nought' }"
					>
						{{ dateList.diseaseGradeName || '' }}{{ dateList.diseaseNo || '' }}
					</view>
				</view>
				<view class="plain">{{ dateList.diseaseStatus || '' }}</view>
				<view class="explain">
					<view class="e-text">截止日期：</view>
					<view class="e-time" :class="getDate(dateList.repairEndDate) < getDate(new Date()) ? 'red' : ''">
						{{ getTime(dateList.repairEndDate || '') }}
					</view>
				</view>
				<view class="job">工单号：{{ dateList.repairOrderNo || '' }}</view>
				<commonLookImage :imageArr="dateList.imgs" width="80px" height="80px"></commonLookImage>
			</view>
			<!-- 视频查看组件 -->
			<view-video
				class="no-ml"
				:showTitle="false"
				:videoList="dateList.videoList"
				style="padding-left: 40rpx"
				:playVideoSrc="playVideoSrcDisabled"
				@lookVideo="lookVideo"
				@closedVideo="closeVideo"
			></view-video>
		</view>
		<view class="content-colot" v-if="dateList.id"></view>
		<view class="d-remarks">
			<view class="d-text">
				<view>修复措施</view>
				<view class="">
					<u-button size="mini" color="#2f80ed" @click="chooseRepair">常用</u-button>
				</view>
			</view>
			<view class="form-item form-item-description">
				<u-textarea v-model="measure" placeholder="请输入内容" @confirm="getDefineValue($event, 'methods')" confirmType="done"></u-textarea>
				<record class="form-item-icon form-item-icon-voice" @setText="fnDescription($event, 'methods')"></record>
				<image v-show="measure" mode="scaleToFill" class="form-item-icon form-item-icon-clear" src="/static/image/login/del1.png" @click="measure = null"></image>
			</view>
		</view>

		<view class="content-colot"></view>
		<view class="form-data">
			<u--form :model="formData" labelPosition="left" labelWidth="auto" class="form" :labelStyle="{ fontSize: '32rpx', fontWeight: '600', color: '#445469' }">
				<u-form-item label="维修日期" prop="repairDate" borderBottom labelWidth="200rpx" @click="productionDateShow = true">
					<view class="required-form-item">*</view>
					<u--input v-model="formData.repairDate" inputAlign="right" disabled disabledColor="#ffffff" placeholder="请选择" border="none"></u--input>
					<u-datetime-picker
						:show="productionDateShow"
						mode="date"
						v-model="repairDate"
						closeOnClickOverlay
						@confirm="productionDateConfirm"
						@cancel="productionDateShow = false"
					></u-datetime-picker>
					<u-icon slot="right" name="arrow-right" color="#A7AEBD" size="20"></u-icon>
				</u-form-item>
			</u--form>
		</view>
		<view class="content-colot"></view>
		<view class="photo-list">
			<view class="photo-top">
				<view class="photo-text">维修照片</view>
			</view>
			<view>
				<view style="padding-left: 30rpx; font-size: 30rpx; padding-bottom: 20rpx">施工前</view>
				<u-upload
					:fileList="beforeFileListImg"
					@afterRead="prevUpload($event, 'pre')"
					@delete="prevDelete($event, 'pre')"
					name="Img"
					multiple
					:maxCount="9"
					:previewFullImage="true"
					accept="image"
				></u-upload>
			</view>
			<view style="margin-top: 20rpx">
				<view style="padding-left: 30rpx; font-size: 30rpx; padding-bottom: 20rpx">施工中</view>
				<u-upload
					:fileList="middleFileListImg"
					@afterRead="prevUpload($event, 'middle')"
					@delete="prevDelete($event, 'middle')"
					name="Img"
					multiple
					:maxCount="9"
					:previewFullImage="true"
					accept="image"
				></u-upload>
			</view>
			<view style="margin-top: 20rpx">
				<view style="padding-left: 30rpx; font-size: 30rpx; padding-bottom: 20rpx">施工后</view>
				<u-upload
					:fileList="afterFileListImg"
					@afterRead="prevUpload($event, 'after')"
					@delete="prevDelete($event, 'after')"
					name="Img"
					multiple
					:maxCount="9"
					:previewFullImage="true"
					accept="image"
				></u-upload>
			</view>
			<view style="margin-top: 20rpx">
				<view style="padding-left: 20rpx; font-size: 30rpx; padding-bottom: 20rpx">维修视频</view>
				<commonVideoUpload
					:showTitle="false"
					:videoFileList="videoFileList"
					:playVideoSrc="playVideoSrc"
					@clickMedias="clickMedias"
					@handleClickPreview="handleClickPreview"
					@closePlayVideoSrc="playVideoSrc = ''"
					@closeFile="closeFile"
				></commonVideoUpload>
			</view>
		</view>
		<view class="content-colot"></view>
		<view class="item_box" v-for="(item, index) in dataArr" :key="index">
			<view class="item_top">
				<text class="material-s">工程量{{ index + 1 }}</text>
				<text class="top_reduce" @click="delColumn(index)">删除</text>
			</view>
			<view class="content required-form-Box">
				<u-form labelPosition="left" labelWidth="auto" class="form" :labelStyle="{ fontSize: '32rpx', fontWeight: '600', color: '#445469' }">
					<u-form-item :label="ownerCode === 'xm' ? '工程项' : '物料描述'" borderBottom labelWidth="200rpx" @click="selectSection(index)">
						<u--input v-model="item.diseaseMaterialName" disabled disabledColor="#ffffff" inputAlign="right" placeholder="请选择" border="none"></u--input>
						<u-icon slot="right" name="arrow-right" color="#A7AEBD" size="20"></u-icon>
					</u-form-item>
					<u-form-item label="工程量" prop="workAmount" borderBottom labelWidth="200rpx">
						<view class="value value-nav" style="display: flex; align-items: center">
							<!-- #ifdef APP-PLUS || H5 -->
							<u-input
								type="number"
								:customStyle="{ paddingRight: '50rpx' }"
								v-model="item.workAmount"
								inputAlign="right"
								placeholder="请输入"
								border="none"
							></u-input>
							<!-- #endif -->

							<!-- #ifdef MP-WEIXIN -->
							<u-input
								type="digit"
								:customStyle="{ paddingRight: '50rpx' }"
								v-model="item.workAmount"
								inputAlign="right"
								placeholder="请输入"
								border="none"
							></u-input>
							<!-- #endif -->
							<text class="day">{{ item.measureUnit }}</text>
						</view>
					</u-form-item>
				</u-form>
			</view>
			<view class="content-colot"></view>
		</view>
		<u-button type="primary" icon="plus" :plain="true" text="添加工作量明细" @click="addColumn"></u-button>
		<view class="content-colot"></view>
		<view class="photo-list">
			<view class="photo-top">
				<view class="photo-text">工程量确认单</view>
			</view>
			<u-upload :fileList="fileListImg" @afterRead="afterRead" @delete="deletePic" name="Img" multiple :maxCount="9" :previewFullImage="true" accept="image"></u-upload>
		</view>
		<compressionImage></compressionImage>
		<!-- 备注 -->
		<view class="content-colot"></view>
		<view class="remark-box" style="padding-top: 30rpx; padding-left: 40rpx; padding-right: 40rpx">
			<view class="form-item form-item-description" style="margin-bottom: 0">
				<u-textarea v-model="remark" placeholder="请输入备注" @blur="inputBlur" confirmType="done"></u-textarea>
				<record class="form-item-icon form-item-icon-voice" @setText="fnDescription"></record>
				<image v-show="remark" mode="scaleToFill" class="form-item-icon form-item-icon-clear" src="/static/image/login/del1.png" @click="remark = ''"></image>
			</view>
		</view>
	</view>
</template>

<script>
import { diseaseMaterialList } from '@/api/engineeringMaintenance/maintenanceTask.js';
import { getCompressionImage, imgFun } from '@/utils/common.js';
import { uploadFile } from '@/utils/request';
import { getToken } from '@/utils/auth.js';
import { getPermission } from '@/utils/common.js';
import mixins from '@/utils/mixins.js';
import compressionImage from '@/components/compression-image/compression-image.vue';
import viewVideo from '@/subpackage-enginner/pages/engineeringMaintenance/common/viewVideo.vue';
import addRepair from './addRepair.vue';
import { getPicture, deleteImg, doc_deleteAttachs } from '@/api/doc.js';
import { urlTobase64, uploadImageFromBase64 } from '@/utils/imageOperation.js';
import fileMixin from '@/mixins/file.js';
export default {
	name: 'serviceInformation',
	components: {
		compressionImage,
		viewVideo, //查看视频组件
		addRepair
	},
	props: {
		dateList: {
			type: Object,
			default: {}
		},
		information: {
			type: Object,
			default: {}
		},
		recordInfo: {
			type: Object,
			default: {}
		}
	},
	mixins: [mixins, fileMixin],
	data() {
		return {
			remark: '',
			formData: {
				makt: '',
				code: ''
			},
			list: [],
			repairDate: Number(new Date()),
			fileListImg: [],
			productionDateShow: false,
			ownerCode: '', //判断是厦门业主还是其他业主
			dataArr: [
				{
					diseaseMaterialId: '', //物料id
					diseaseMaterialName: '',
					workAmount: '', //工程量
					measureUnit: '' //单位
				}
			],
			beforeFileListImg: [], //施工前照片数组
			preConstructionDocId: null,
			middleFileListImg: [], //施工中照片数组
			middleConstructionDocId: null,
			afterFileListImg: [], //施工后照片数组
			afterConstructionDocId: null,
			voucherDocId: '', //工程确认单id
			measure: '', //修复措施
			playVideoSrcDisabled: '',
			videoFileList: [], //视频数组
			playVideoSrc: '',
			maintainConstructionDocId: null, //维修视频id
			diseaseInfo: {}, //新增维修信息
			beforeSourceImgs: [],
			middleSourceImgs: [],
			afterSourceImgs: [],
			videoSource: [],
			updateBeforeIds: [],
			updateMiddleIds: [],
			updateAfterIds: [],
			updateVideoIds: [],
			docId: null,
			workUpdateIds: [],
			workSource: [],
			removeFileSet: new Set(),
			deleteBeforeFile: [],
			deleteMiddleFile: [],
			deleteAfterFile: [],
			deleteFileImgs: [],
			deleteVideoFiles: []
			// recordInfo:{}
		};
	},
	watch: {
		information(newVal, oldVal) {
			if (newVal) {
				this.assignment();
			}
		},
		'recordInfo.mileage'(val) {
			console.log(val, 'recordInfo');
		}
	},
	mounted() {
		this.$store.commit('setCompressionImageThis', this);
		this.ownerCode = uni.getStorageSync('ownerCode');
		this.describe();
	},
	created() {
		let repairDate = this.getDate(new Date().getTime());
		this.$set(this.formData, 'repairDate', repairDate);
	},
	methods: {
		async deleteFiles() {
			const array = [...this.deleteBeforeFile, ...this.deleteMiddleFile, ...this.deleteAfterFile, ...this.deleteFileImgs, ...this.deleteVideoFiles];
			if (array.length) {
				await doc_deleteAttachs(array);
			}
		},

		uploadFileListAttach() {
			return new Promise(async (resolve, reject) => {
				if (this.beforeFileListImg.length) {
					const array = this.beforeFileListImg.filter((item) => !item.id);
					const dataList = this.addWaterTxt('pre');
					//施工前照片id
					this.preConstructionDocId = await this.uploadWaterMark(array, dataList, this.preConstructionDocId, { token: getToken() }, {}, 'file');
				}
				if (this.middleFileListImg.length) {
					const array = this.middleFileListImg.filter((item) => !item.id);
					const dataList = this.addWaterTxt('middle');
					//施工中照片id
					this.middleConstructionDocId = await this.uploadWaterMark(array, dataList, this.middleConstructionDocId, { token: getToken() }, {}, 'file');
				}
				if (this.afterFileListImg.length) {
					const array = this.afterFileListImg.filter((item) => !item.id);
					const dataList = this.addWaterTxt('after');
					//施工后照片id
					this.afterConstructionDocId = await this.uploadWaterMark(array, dataList, this.afterConstructionDocId, { token: getToken() }, {}, 'file');
				}
				if (this.fileListImg.length) {
					const array = this.fileListImg.filter((item) => !item.id);
					//确认单id
					this.docId = await this.uploadFileList(array, this.docId);
				}
				if (this.videoFileList.length) {
					const array = this.videoFileList.filter((item) => !item.id);
					//视频id
					this.maintainConstructionDocId = await this.uploadFileList(array, this.maintainConstructionDocId);
				}
				resolve();
			});
		},

		addWaterTxt(type) {
			let formData = {};
			formData.name = this.dateList.lineSiteSectionName || this.recordInfo.lineSiteSectionName;
			//里程
			const distance = this.getContent2(this.dateList) || '';
			//环号
			const startRing = this.dateList.startNumber || '';
			const endRing = this.dateList.endNumber || '';
			const others = this.dateList.others || '';
			const timeClock = this.dateList.clockwisePosition || '';
			formData.ring = `${distance}${distance && startRing ? ',' : ''}${startRing}${startRing && endRing ? '~' : ''}${endRing}${
				(distance && others) || (endRing && others) ? ',' : ''
			}${others}${(distance && timeClock) || (startRing && endRing && timeClock) || (others && timeClock) ? ',' : ''}${timeClock}`;
			formData.dateTime = this.formData.repairDate;
			if (type === 'pre') {
				formData.text = '施工前';
			} else if (type === 'middle') {
				formData.text = '施工中';
			} else {
				formData.text = '施工后';
			}
			let arrList = [formData.text, formData.name, formData.ring, formData.dateTime];
			return arrList.filter((it) => it);
		},
		/** 预览文件 */
		lookVideo(url) {
			this.playVideoSrcDisabled = url;
		},
		closeVideo() {
			this.playVideoSrcDisabled = '';
		},
		/** 预览文件 */
		handleClickPreview(item) {
			this.playVideoSrc = item.url;
		},
		async clickMedias(e) {
			uni.chooseVideo({
				sourceType: ['camera', 'album'],
				success: async (res) => {
					console.log(res, '选择成功回调函数');
					if (parseInt(res.duration) > 60) {
						return uni.showToast({
							title: '上传的视频不能超过60s',
							icon: 'none',
							mask: true
						});
					}
					this.videoFileList.push({ ...res, url: res.tempFilePath, type: 'video' });
				},
				fail: (e) => {
					console.warn('错误', e);
				},
				complete: (end) => {
					// console.log(end);
				}
			});
		},

		// 删除文件
		closeFile(file, index) {
			if (file.id) {
				this.deleteVideoFiles.push(file.id);
			}
			this.videoFileList.splice(index, 1);
		},

		chooseRepair() {
			uni.navigateTo({
				url: '/subpackage-enginner/pages/engineeringMaintenance/common/table',
				events: {
					setData: (data) => {
						this.measure = data.data.makt;
					}
				}
			});
		},
		//现状回车按钮事件
		getDefineValue(e) {
			this.measure = e.detail.value;
		},

		// 物料描述
		describe() {
			let param = {
				currPage: 1,
				pageSize: 9999,
				params: {
					projectId: uni.getStorageSync('isOwner')
				}
			};
			diseaseMaterialList(param).then((res) => {
				if (res.status === 1 && res.success) {
					this.list = res.result.list;
				}
			});
		},
		// 维修中数据和需返工数据
		async assignment() {
			let ment = JSON.parse(JSON.stringify(this.information));
			//施工前照片回显
			if (ment.preConstructionDocId) {
				this.preConstructionDocId = ment.preConstructionDocId;
				this.beforeFileListImg = await this.getItemImage(ment.preConstructionDocId);
				this.beforeSourceImgs = JSON.parse(JSON.stringify(this.beforeFileListImg));
			}
			//施工中后照片回显
			if (ment.middleConstructionDocId) {
				this.middleConstructionDocId = ment.middleConstructionDocId;
				this.middleFileListImg = await this.getItemImage(ment.middleConstructionDocId);
				console.log(this.middleFileListImg, '施工中');
				this.middleSourceImgs = JSON.parse(JSON.stringify(this.middleFileListImg));
			}
			//施工后照片回显
			if (ment.afterConstructionDocId) {
				this.afterConstructionDocId = ment.afterConstructionDocId;
				this.afterFileListImg = await this.getItemImage(ment.afterConstructionDocId);
				this.afterSourceImgs = JSON.parse(JSON.stringify(this.afterFileListImg));
			}
			//维修视频回显
			if (ment.maintainConstructionDocId) {
				this.maintainConstructionDocId = ment.maintainConstructionDocId;
				this.videoFileList = await this.getVideoList(ment.maintainConstructionDocId);
				this.videoSource = JSON.parse(JSON.stringify(this.videoFileList));
			}
			//工程量照片回显
			if (ment.voucherDocId) {
				this.formData.docId = ment.voucherDocId;
				this.docId = ment.voucherDocId;
				this.fileListImg = await this.getItemImage(ment.voucherDocId);
				this.workSource = JSON.parse(JSON.stringify(this.fileListImg));
			}
			if (ment.repairDate) {
				let repairDate = this.getDate(ment.repairDate);
				this.$set(this.formData, 'repairDate', repairDate);
			}
			//工程量数组回显
			if (ment.diseaseMaterials.length > 0) {
				this.dataArr = ment.diseaseMaterials.map((item) => ({
					diseaseMaterialId: item.id,
					diseaseMaterialName: item.makt,
					workAmount: item.workAmount,
					measureUnit: item.measureUnit
				}));
			}
			if (ment.remark) {
				this.remark = ment.remark;
			}
			if (ment.measure) {
				this.measure = ment.measure;
			}
			console.log(ment, 'ment------------------');
		},
		//选择物料描述
		selectSection(index) {
			this.dataArr[index].workAmount = '';
			uni.navigateTo({
				url: '/subpackage-enginner/pages/engineeringMaintenance/repair/components/describe',
				events: {
					setData: (data) => {
						this.dataArr[index].diseaseMaterialName = data.data.makt;
						this.dataArr[index].diseaseMaterialId = data.data.id;
						this.dataArr[index].measureUnit = data.data.measureUnit;
					}
				}
			});
		},
		/**
		 * 获取到docId中的图片并且拼成网络路径格式
		 * @param {Number} docId
		 * @return {String} //拼好的网络路径格式
		 */
		async getItemImage(docId) {
			return await new Promise((resolve, reject) => {
				getPicture({
					docId
				})
					.then((res) => {
						let imgResult = res.result.filter((item) => item.contentType.substring(0, item.contentType.indexOf('/')) === 'image');
						resolve(
							imgResult.map((it) => ({
								url: this.$config.IMG_FILE_URL + it.fileName,
								id: it.id
							}))
						);
					})
					.catch((err) => reject(err));
			});
		},
		async getVideoList(docId) {
			return await new Promise((resolve, reject) => {
				getPicture({
					docId
				})
					.then((res) => {
						let videoResult = res.result.filter((item) => item.contentType.substring(0, item.contentType.indexOf('/')) === 'video');
						resolve(
							videoResult.map((it) => ({
								url: this.$config.VIDEO_URL + it.fileName,
								id: it.id
							}))
						);
					})
					.catch((err) => reject(err));
			});
		},
		//施工前上传
		async prevUpload(event, type) {
			let tempImgList = [];

			if (type === 'pre') {
				for (var item in event.file) {
					// event.file[item] = await this.imgFun(event.file[item])
					// #ifdef APP-PLUS
					event.file[item].url = await imgFun(event.file[item]);
					event.file[item].thumb = await imgFun(event.file[item]);
					// #endif
					this[`beforeFileList${event.name}`].push({
						...event.file[item],
						// status: 'uploading',
						message: '上传中'
					});
				}
			} else if (type === 'middle') {
				for (var item in event.file) {
					// #ifdef APP-PLUS
					event.file[item].url = await imgFun(event.file[item]);
					event.file[item].thumb = await imgFun(event.file[item]);
					// #endif
					this[`middleFileList${event.name}`].push({
						...event.file[item],
						// status: 'uploading',
						message: '上传中'
					});
				}
			} else if (type === 'after') {
				for (var item in event.file) {
					// #ifdef APP-PLUS
					event.file[item].url = await imgFun(event.file[item]);
					event.file[item].thumb = await imgFun(event.file[item]);
					// #endif
					this[`afterFileList${event.name}`].push({
						...event.file[item],
						// status: 'uploading',
						message: '上传中'
					});
				}
			} else {
				throw new Error('上传类型错误');
			}
		},
		prevDelete(event, type) {
			if (type === 'pre') {
				if (event.file.id) {
					this.deleteBeforeFile.push(event.file.id);
				}
				this.beforeFileListImg.splice(event.index, 1);
			} else if (type === 'middle') {
				if (event.file.id) {
					this.deleteMiddleFile.push(event.file.id);
				}
				this.middleFileListImg.splice(event.index, 1);
			} else {
				if (event.file.id) {
					this.deleteAfterFile.push(event.file.id);
				}
				this.afterFileListImg.splice(event.index, 1);
			}
		},
		// 删除图片
		async deletePic(event) {
			if (event.file.id) {
				this.deleteFileImgs.push(event.file.id);
			}
			this.fileListImg.splice(event.index, 1);
		},
		// 新增图片
		async afterRead(event) {
			for (let item in event.file) {
				this.fileListImg.push({
					...event.file[item]
				});
			}
		},
		inputBlur(e) {
			this.cursor = e.detail.cursor;
		},
		description(text) {
			let index = this.cursor || 0;
			let str = this.formData.description || '';
			this.cursor += text.length;
			text = str.slice(0, index) + text + str.slice(index);
			this.$set(this.formData, 'description', text);
		},
		// 选择施工日期
		productionDateConfirm(val) {
			this.formData.repairDate = this.getDate(val.value);
			this.productionDateShow = false;
		},
		//截止日期
		getTime(str) {
			if (!str) return '';
			return this.getDate(str);
		},
		// 添加按钮事件
		addColumn() {
			console.log(this.dataArr, 111111111111111);
			for (let i = 0; i < this.dataArr.length; i++) {
				if (!this.dataArr[i].diseaseMaterialName || !this.dataArr[i].workAmount) {
					return uni.showToast({
						title: '请填写完整数据',
						icon: 'none'
					});
				}
			}
			this.dataArr.push({
				diseaseMaterialId: '', //物料id
				diseaseMaterialName: '',
				workAmount: '', //工程量
				measureUnit: '' //单位
			});
		},
		// 删除行按钮事件
		delColumn(index) {
			this.dataArr.splice(index, 1);
		},
		inputBlur(e) {
			this.cursor = e.detail.cursor;
		},
		//录音事件
		fnDescription(text, type) {
			let index = this.cursor || 0;
			let str = this.formData.description || '';
			this.cursor += text.length;
			text = str.slice(0, index) + text + str.slice(index);
			if (type === 'methods') {
				this.measure = str.slice(0, index) + text + str.slice(index);
			} else {
				this.remark = str.slice(0, index) + text + str.slice(index);
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.service-information {
	.all-text {
		padding-top: 60rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		line-height: 32rpx;

		.txt-line {
			font-size: 18px;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #445469;
			padding-bottom: 20rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.service-text {
			display: flex;
			align-items: center;
			margin-bottom: 30rpx;

			.text-ring {
				font-size: 32rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #445469;
				line-height: 38rpx;
				margin-right: 20rpx;
				max-width: 400rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.leval {
				width: auto;
				clip-path: polygon(15rpx 0, 100% 0, calc(100% - 15rpx) 52rpx, 0% 52rpx);
				height: 40rpx;
				font-size: 28rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #ffffff;
				line-height: 38rpx;
				background: linear-gradient(90deg, #5295fe 0%, #3fb8ff 100%);
				text-align: center;
				padding: 0 20rpx;
			}
		}
	}

	.plain {
		margin-bottom: 20rpx;
	}

	.explain {
		display: flex;

		.e-text {
			margin-bottom: 20rpx;
		}

		.e-time {
			margin-bottom: 20rpx;
			color: #6a819e;
		}

		.red {
			color: #ff6a6a;
		}
	}

	.job {
		margin-bottom: 20rpx;
		max-width: 500rpx;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}

	.content-colot {
		height: 40rpx;
		background: #f5f7fa;
	}

	.form-data {
		padding-right: 40rpx;
		margin-left: 64rpx;

		.value-nav {
			position: relative;

			.day {
				position: absolute;
				top: 4rpx;
				right: 0rpx;
			}
		}
	}

	.photo-list {
		padding-right: 40rpx;
		margin-left: 40rpx;

		.photo-top {
			display: flex;
			height: 100rpx;
			justify-content: space-between;

			.photo-text {
				font-size: 32rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #445469;
				line-height: 100rpx;
			}
		}
	}

	.d-remarks {
		padding-right: 40rpx;
		margin-left: 40rpx;

		.d-text {
			height: 100rpx;
			font-size: 32rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #445469;
			line-height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	}

	.form-item {
		width: 100%;
		position: relative;
		margin-bottom: 40rpx;
	}

	.form-item-description {
		.form-item-icon {
			width: 48rpx;
			height: 48rpx;
		}

		.form-item-icon-voice {
			position: absolute;
			top: 10rpx;
			right: 16rpx;
			z-index: 3;
		}

		.form-item-icon-clear {
			position: absolute;
			right: 16rpx;
			bottom: 10rpx;
			z-index: 2;
		}
	}

	.btn_box {
		height: 100rpx;

		.btn_group {
			display: flex;
			align-items: center;
			justify-content: space-between;
			bottom: 0;
			width: 90%;
			margin-left: 40rpx;
		}
	}

	/deep/.u-textarea {
		padding-right: 65rpx;
	}

	/deep/ .u-form-item__body__right__content__slot[data-v-067e4733] {
		flex-direction: column !important;
	}
}

.item_top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20rpx 40rpx;
	border-bottom: 2rpx solid #f4f4f4;
}

.content.required-form-Box {
	padding: 0 40rpx;
}

.top_reduce {
	padding: 10rpx 30rpx;
	background-color: #ff6a6a;
	color: #fff;
}

.ye {
	background: linear-gradient(90deg, #ff882b 0%, #ff9f3d 100%) !important;
}

.re {
	background: linear-gradient(90deg, #ff2b2b 0%, #ff603d 100%) !important;
}

.bl {
	background: linear-gradient(90deg, #5295fe 0%, #3fb8ff 100%) !important;
}

.video-class /deep/ .u-upload__wrap {
	flex-direction: column;
}

.no-ml {
	margin-left: 0px !important;

	/deep/ .video-class {
		margin-left: 0px !important;
	}
}
</style>
